<!doctype html>
<html lang="en">

<head>
  <title>QueryCat Console</title>
  <meta charset="UTF-8" />
  <meta name="description" content="QueryCat web console" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/quasar@2.16/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  <link
    href=""
    rel="icon"
    type="image/x-icon" />

  <style>
    .sticky-header-table {
      max-height: 700px;
    }
    .sticky-header-table thead tr:first-child th {
      background-color: white;
    }
    .sticky-header-table thead tr th {
      position: sticky;
      z-index: 1;
      user-select: text;
    }
    .sticky-header-table thead tr:first-child th {
      top: 0;
    }
    .sticky-header-table .q-table--loading thead tr:last-child th {
      top: 48px;
    }
    .query-editor {
      font-family: monospace;
      height: calc(100% - 40px);
      outline: 0 none transparent;
    }
    ul {
      padding-left: 1em;
    }
    .folder {
      color: #f1d592;
    }
  </style>
</head>

<body>
  <div id="q-app">
    <q-bar class="bg-primary text-white">
      <div>QueryCat Console</div>
    </q-bar>

    <q-tabs dense no-caps align="left" class="bg-secondary text-white">
      <q-route-tab to="/" label="Query"></q-route-tab>
      <q-route-tab to="/files" label="Files"></q-route-tab>
      <q-route-tab to="/info" label="Info"></q-route-tab>
    </q-tabs>

    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>
  </div>

  <!-- QueryPage -->
  <template id="query-page">
    <q-splitter
      v-model="splitterModel"
      horizontal
      style="height: calc(100vh - 75px);">
      <template v-slot:before>
        <q-form
          @submit.prevent="runQuery()"
          method="post"
          class="full-height"
          :ref="query">
          <div>
            <q-btn type="submit" label="Run" size="sm" color="primary" class="q-ma-xs" icon="send"></q-btn>
            <q-btn label="Schema" size="sm" color="secondary" class="q-ma-xs" icon="schema" @click.native="runSchema()"></q-btn>
            <q-btn label="Reset" size="sm" color="secondary" class="q-ma-xs" icon="clear_all" @click.native="reset()"></q-btn>
          </div>
          <textarea
            v-model="query"
            @keydown.ctrl.enter.prevent="runQuery()"
            class="full-width query-editor"
            spellcheck="false"
            autofocus>
          </textarea>
        </q-form>
      </template>
      <template v-slot:after>
        <q-table
          :rows="rows"
          :columns="columns"
          class="sticky-header-table full-height"
          no-data-label="No data."
          dense flat square bordered hide-no-data
          separator="vertical"
          row-key="row_number"
          virtual-scroll
          :filter="filter"
          v-model:pagination="pagination"
          :rows-per-page-options="[0]"
          :virtual-scroll-sticky-size-start="48">
          <template v-slot:top-right>
            <q-input dense debounce="300" v-model="filter" placeholder="Search">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </template>
        </q-table>
      </template>
    </q-splitter>
  </template>

  <!-- InfoPage -->
  <template id="info-page">
    <div class="q-pa-md">
      <div class="row">
        <div class="col-2 text-bold">Version</div>
        <div class="col-10" v-html="version"></div>
      </div>
      <div class="row">
        <div class="col-2 text-bold">OS</div>
        <div class="col-10" v-html="os"></div>
      </div>
      <div class="row">
        <div class="col-2 text-bold">Platform</div>
        <div class="col-10" v-html="platform"></div>
      </div>
      <div class="row">
        <div class="col-2 text-bold">Installed plugins</div>
        <div class="col-10">
          <ul>
            <li v-for="plugin in installedPlugins" :key="plugin.name">
              {{ plugin.name }}
              <code>({{ plugin.uri }})</code>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>

  <!-- Files -->
  <template id="files-page">
    <div class="q-pa-md">
      <q-breadcrumbs>
        <q-breadcrumbs-el
          v-for="(name, index) in pathElements">
          <router-link :to="{ path: 'files', query: { q: getFullPath('', index + 1) + '/' }}">{{ name }}</router-link>
        </q-breadcrumbs-el>
      </q-breadcrumbs>
      <q-separator></q-separator>
      <q-table
        :rows="rows"
        :columns="columns"
        :hide-pagination="true"
        :rows-per-page-options="[0]"
        row-key="name"
        dense flat square hide-no-data>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="name" :props="props">
              <q-icon v-if="props.row.type === 'd'" class="folder" name="folder"></q-icon>
              <q-icon v-if="props.row.type === 'f'" :name="getFileIcon(props.row.name)"></q-icon>
              &nbsp;&nbsp;
              <router-link :to="{ path: 'files', query: { q: getFullPath(props.row.name) }}"
                           custom v-slot="{ href, navigate, isActive }">
                <a :href="getFullDownloadPath(getFullPath(props.row.name))" @click="navigate">{{ props.row.name }}</a>
              </router-link>
            </q-td>
            <q-td key="last_write_time" :props="props">
              {{ props.row.last_write_time }}
            </q-td>
            <q-td key="size" :props="props">
              {{ props.row.size_pretty }}
            </q-td>
            <q-td key="actions" :props="props">
              <router-link
                @click.native="setPathQuery(props.row.path)"
                :to="{ path: 'query' }">[ query ]</router-link>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
  </template>

  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@2.16/dist/quasar.umd.prod.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@1.6/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@4/dist/vue-router.global.min.js"></script>
  <script src="index.js?d=20240508"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHashHistory(),
        routes: [
          { path: '/', component: queryPage },
          { path: '/query', component: queryPage },
          { path: '/info', component: infoPage },
          { path: '/files', component: filesPage }
        ]
      });

      axios.interceptors.response.use(
        function(response) {
          return response;
        },
        function(error) {
          var errorMessage = error.message;
          if (error.response && error.response.data && error.response.data.message) {
            errorMessage = error.response.data.message;
          }
          Quasar.Notify.create({
            type: 'negative',
            message: errorMessage
          });
          return Promise.reject(error);
      });

      const app = Vue.createApp();
      app.use(Quasar, {
        config: {
          notify: {},
          brand: {
            primary: '#7f7f7f',
            secondary: '#999999',
            accent: '#9C27B0',

            dark: '#1d1d1d',
            'dark-page': '#121212',

            positive: '#21BA45',
            negative: '#C10015',
            info: '#31CCEC',
            warning: '#F2C037'
          }
        }
      });
      app.use(router);
      app.mount('#q-app');
      window.app = app;
    });
  </script>
  <script>
    window.baseUrl = '';
  </script>
</body>
</html>
